<template>
  <div>
    <div v-if="currentInfo.organizationUnitEdition" class="hall_version gl_contentBox gl_mb_15 gl_clear">
      <div class="hall_name gl_fl">
        <div class="logo_box">
          <img class="logo_img" :src="getStaticFileUrl(paltFormData.logoUrl)" alt="" srcset="">
        </div>
        <div class="name_version">
          <div v-if="paltFormData.name" class="hall_name_text">
            <span>{{ paltFormData.name }}</span>
          </div>
          <div v-else>
            <span v-if="currentInfo.organizationUnitEdition" class="hall_name_text">
              {{ currentInfo.organizationUnitEdition.organizationUnit.displayName }}
            </span>
          </div>
          <div v-if="currentInfo.organizationUnitEdition" class="hall_version_tag">
            {{ currentInfo.organizationUnitEdition.edition.name }}
          </div>
        </div>
      </div>
      <div class="hall_date gl_fr">
        <div style="padding-top: 9px">
          <span v-if="validDate.year || validDate.month || validDate.day" class="base_text">到期日：</span>
          <span class="special_text">{{ validDate.year }}</span>
          <span v-if="validDate.year" class="base_text"> 年 </span>
          <span class="special_text">{{ validDate.month }}</span>
          <span v-if="validDate.month" class="base_text"> 月 </span>
          <span class="special_text">{{ validDate.day }}</span>
          <span v-if="validDate.day" class="base_text"> 日 </span>
        </div>
      </div>
    </div>
    <div class="nav">
      <div class="gl_contentBox">
        <div v-for="(item, index) in menuList" :key="index" style="height: 68px; display: flex; margin-top: 16px">
          <div :class="'tu' + (index % 3)">{{ $t('club.menu.' + item.title) }}</div>
          <div
            v-for="(jtem, jndex) in item.children"
            :key="jndex"
            :class="[
              'tuleft' + (index % 3),
              'turight' + (index % 3)
            ]"
            @click="jumpToRoute(jtem)"
          >
            {{ $t('club.menu.' + jtem.title) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import menu from '@/layout/hall/config/menu.js';
import {
  api_GET_ClubSettingCurrent // 获取
} from '@/extend/api/hallswaggerApi/app.js';
export default {
  data() {
    return {
      paltFormData: {}
    };
  },
  computed: {
    currentPermissionGroups() {
      return this.$store.state.user.info.permissionGroups;
    },
    formatPermissionGroups() {
      const _list = this.currentPermissionGroups || [];
      _list.sort((a, b) => a.sortOrder - b.sortOrder);
      let tileArr = [];
      _list.forEach(item => {
        tileArr = tileArr.concat(item.children);
      });
      return tileArr;
    },
    menuList () {
      const _menu = JSON.parse(JSON.stringify(menu));
      const _storeId = this.$store.state.permission.storeId;
      // todo filter handle
      if (!_storeId) {
        for (let i = 0; i < _menu.length; i++) {
          const item = _menu[i];
          if (item.title === 'mall') {
            item.children = item.children.slice(0, 1);
          }
        }
      }
      console.log('🚀 ~ file: index.vue ~ line 99 ~ menuList ~ menu', _menu);
      return _menu;
    },
    currentInfo () {
      return this.$store.state.user.info;
    },
    validDate () {
      const _edition = this.currentInfo.organizationUnitEdition;
      if (_edition) {
        const _date = _edition.validTo;
        const _year = _date.slice(0, 4);
        const _month = _date.slice(5, 7);
        const _day = _date.slice(8, 10);
        return {
          year: _year,
          month: _month,
          day: _day
        };
      } else {
        return {};
      }
    }
  },
  created() {
    this.getPlatFormData();
  },
  methods: {
    jumpToRoute(jtem) {
      this.$router.push({
        name: jtem.routeName
      });
    },
    getPlatFormData() {
      api_GET_ClubSettingCurrent().then(res => {
        console.log('ere', res);
        this.paltFormData = res;
      }).catch(error => {
        that.$message({ type: 'error', message: error.error.message });
      });
    },
    // 上传图片回显
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return require('@/assets/images/face_default.png');
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style lang="scss" scoped>
.hall_version {
  width: 100%;
  // height: 70px;
  height: 120px;
}
.hall_name {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hall_date {
  margin: 50px 50px 0 0;
}
.logo_img {
  width: 80px;
  height: 80px;
  border-radius: 6px;
}
.name_version {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.hall_name_text {
  display: inline-block;
  max-width: 425px;
  margin-right: 18px;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  vertical-align: middle;
  color: rgba(0, 0, 0, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hall_version_tag {
  margin-top: 10px;
  height: 30px;
  box-sizing: border-box;
  padding: 6px 14px;
  border-radius: 48px;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  color: #1990FF;
  border: 1px solid #1990FF;
  vertical-align: middle;
}
.base_text {
  font-size: 14px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.45);
  vertical-align: middle;
}
.special_text {
  font-weight: 500;
  font-size: 24px;
  line-height: 22px;
  color: #D50D0D;
  vertical-align: middle;
}

.header {
  display: inline-block;
  height: 100%;
  padding-right: 24px;
  padding-top: 9px;
  vertical-align: top;
}
.img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.nav .gl_contentBox {
  overflow: auto;
}
.nav {
  width: 100%;
  overflow: auto;
}
.tu0 {
  background-image: url(../../assets/images/CardRankings/Singles.png);
  width: 162px;
  height: 63px;
  background-size: 100%;
  border-radius: 10px;
  text-align: center;
  line-height: 63px;
  color: white;
  flex-shrink: 0;
}

.tuleft0 {
  width: 132px;
  height: 63px;
  border: 1px solid #f44771;
  border-radius: 10px;
  text-align: center;
  line-height: 63px;
  color: rgb(0, 0, 0);
  margin-left: 12px;
  cursor: pointer;
  transition: 0.3s;
  flex-shrink: 0;
}
.turight0:hover {
  background-color: #f44771;
  color: white;
}
.tu1 {
  background-image: url(../../assets/images/CardRankings/Group80.png);
  width: 162px;
  height: 63px;
  background-size: 100%;
  border-radius: 10px;
  text-align: center;
  line-height: 63px;
  color: white;
  flex-shrink: 0;
}
.tuleft1 {
  width: 132px;
  height: 63px;
  border: 1px solid #ff9a3e;
  border-radius: 10px;
  text-align: center;
  line-height: 63px;
  color: rgb(0, 0, 0);
  margin-left: 12px;
  cursor: pointer;
  transition: 0.3s;
  flex-shrink: 0;
}
.turight1:hover {
  background-color: #ff9a3e;
  color: white;
}
.tu2 {
  background-image: url(../../assets/images/CardRankings/Group81.png);
  width: 162px;
  height: 63px;
  background-size: 100%;
  border-radius: 10px;
  text-align: center;
  line-height: 63px;
  color: white;
  flex-shrink: 0;
}
.tuleft2 {
  width: 132px;
  height: 63px;
  border: 1px solid #332a7c;
  border-radius: 10px;
  text-align: center;
  line-height: 63px;
  color: rgb(0, 0, 0);
  margin-left: 12px;
  cursor: pointer;
  transition: 0.3s;
  flex-shrink: 0;
}
.turight2:hover {
  background-color: #332a7c;
  color: white;
}
</style>
